<template>
  <div class="vanilla">
    <div class="content">
      <div class="content-left">
        <!-- 新建 -->
        <div class="content-title">
          自选板块
          <el-button size="mini" @click="activeAdd()">+板块</el-button>
        </div>
        <!-- 文件夹 -->
        <div
          v-for="(item, index) in classPlate.user_folder_list"
          :class="selectPlate.id === item.id ? 'content-active' : 'content-class'"
          v-on:mouseover="hover(index)"
          v-on:mouseout="hoverout"
          @click="activePlate(item)"
          slot="reference"
          :key="index"
        >
          <p>{{ item.name }}</p>
          <el-popover placement="bottom" width="100" trigger="hover" popper-class="contentpopper">
            <span class="el-icon-more" slot="reference"></span>

            <div @click="activeEdit(item, index)" style="cursor: pointer;width:100%">
              <span>重命名</span>
              <i class="el-icon-edit-outline"></i>
            </div>
            <el-popconfirm title="确定删除吗？" @confirm="deletePlate(item.id)" :key="index">
              <div slot="reference" style="cursor: pointer;width:100%">
                <span>删除</span>
                <i class="el-icon-delete"></i>
              </div>
            </el-popconfirm>
          </el-popover>
        </div>
      </div>
      <!-- 数据 -->
      <div class="content-right">
        <div class="content-top">
          <div>
            <el-dropdown
              :hide-on-click="false"
              trigger="click"
              placement="bottom-start"
              @visible-change="visibleChange"
            >
              <span class="el-dropdown-link">
                设置表头
                <img
                  style="margin-left: 3px; width: 9px; height: 7px"
                  src="@/assets/shezhibiaotou.png"
                  alt
                />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <div
                    class="titles"
                    style="width: 430px; display: flex;justify-content: space-between;"
                  >
                    <div class="titles-left">
                      <span>股票</span>
                      <el-checkbox-group
                        v-model="checkstock"
                        style="border-right: 1px solid #f3f3f3;"
                      >
                        <el-checkbox
                          v-for="(item,idx) in stockHead"
                          :label="item.name"
                          :key="idx"
                        >{{ item.showname }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="titles-center">
                      <span>波动</span>
                      <el-checkbox-group
                        v-model="checkListWaveHead"
                        style="border-right: 1px solid #f3f3f3;"
                      >
                        <el-checkbox
                          v-for="(item, index) in all_wave_head"
                          :label="item.name"
                          :key="index"
                        >{{ item.showname }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="titles-center">
                      <span>结构</span>
                      <el-checkbox-group
                        v-model="aliasname"
                        style="border-right: 1px solid #f3f3f3;"
                      >
                        <el-checkbox
                          v-for="(item, index) in aliasname_list"
                          :label="item.aliasname"
                          :key="index"
                        >{{ item.aliasname }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                    <div class="titles-right">
                      <span>周期</span>
                      <el-checkbox-group v-model="checkList">
                        <el-checkbox
                          v-for="(item, index) in tabList"
                          :label="item.cycletxt"
                          :key="index"
                        >{{ item.cycletxt }}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <!-- <el-button type="primary" size="mini" @click="activeAddition()">+ 新增</el-button> -->
          </div>
        </div>
        <!-- 列表 -->
        <div class="tables">
          <el-table
            :data="stock_list"
            stripe
            :border="true"
            row-key="id"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="changeCellStyle"
            @sort-change="changeSort"
            :tree-props="{
              children: 'children',
              hasChildren: 'hasChildren',
            }"
            :default-sort="{ prop: 'amount, market', order: 'descending' }"
            style="width: 100%"
            height="500"
            ref="table"
            size="mini"
            v-loading="loading"
          >
            <el-table-column
              fixed="left"
              type="selection"
              width="40"
              align="center"
              :resizable="false"
            ></el-table-column>
            <el-table-column
              fixed="left"
              type="index"
              label="序号"
              width="55"
              align="center"
              :resizable="false"
            ></el-table-column>
            <el-table-column
              fixed="left"
              prop="stockcode"
              label="代码"
              align="center"
              :sortable="'custom'"
              :resizable="false"
            ></el-table-column>
            <el-table-column
              fixed="left"
              prop="name"
              label="简称"
              align="center"
              :sortable="'custom'"
              :resizable="false"
            ></el-table-column>
            <el-table-column
              prop="price"
              label="最新价"
              align="center"
              width="90"
              :sortable="'custom'"
              :resizable="false"
            ></el-table-column>
            <el-table-column
              prop="zhangfu"
              label="涨幅%"
              align="center"
              :show-overflow-tooltip="true"
              :resizable="false"
              :sortable="'custom'"
            >
              <template slot-scope="scope">
                <span
                  :style="{ 
                color: `${scope.row.zhangfu > 0 ? '#e93030' : '#0E9D58' }`,
              }"
                >{{scope.row.zhangfu}}%</span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="item in checkListWaveHeadTable"
              :key="item.name"
              :prop="item.name"
              :label="item.showname"
              :width="getwidth(item.showname)"
              align="center"
              :show-overflow-tooltip="true"
              :resizable="false"
              :sortable="'custom'"
            >
              <template slot-scope="scope">
                <span
                  :style="{color: getColor(scope.row[item.name])}"
                >{{ getPercentageSign(scope.row[item.name]) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-for="item in checkstockTable"
              :key="item.name"
              :prop="item.name"
              :label="item.showname"
              :width="getwidth(item.showname)"
              align="center"
              :show-overflow-tooltip="true"
              :resizable="false"
              :sortable="'custom'"
            ></el-table-column>
            <el-table-column
              v-for="(item, index) in productList"
              :key="index"
              :label="item.name"
              :prop="item.name"
              width="105"
              align="center"
              :show-overflow-tooltip="true"
              :resizable="false"
              :sortable="'custom'"
            >
              <template slot-scope="scope">
                <span>
                  {{
                  scope.row.xcprice_list[index].price
                  ? scope.row.xcprice_list[index].price
                  : "-"
                  }}
                </span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" width="50" align="center" :resizable="false">
              <template slot-scope="scope">
                <el-popover
                  placement="bottom-start"
                  width="50"
                  trigger="click"
                  popper-class="mypopover"
                >
                  <div class="options">
                    <el-popconfirm
                      title="确定删除吗？"
                      @confirm="deleteDate(scope.row)"
                      :key="scope.row.id"
                    >
                      <div slot="reference" style="text-">
                        <el-button type="text" size="small">删除</el-button>
                      </div>
                    </el-popconfirm>
                    <div>
                      <el-button @click="activeMove(scope.row)" type="text" size="small">移动到</el-button>
                    </div>
                  </div>
                  <span class="el-icon-more" slot="reference"></span>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 新增板块 -->
    <el-dialog
      title="新建自选板块"
      :visible.sync="isShowAdd"
      width="20%"
      :before-close="isShowAddHandleClose"
      class="userFolderDialog"
    >
      <div class="title">板块名称:</div>
      <el-input size="mini" v-model="className"></el-input>
      <div class="warning">
        <i class="el-icon-warning"></i>
        支持300个板块，可同步到手机
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAdd = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addNews()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑板块名称 -->
    <el-dialog
      title="编辑板块名称"
      :visible.sync="isShowEdit"
      width="20%"
      :before-close="()=>{
        isShowEdit = false
      }"
      class="userFolderDialog"
    >
      <div class="title">板块名称:</div>
      <el-input size="mini" v-model="className"></el-input>
      <div class="warning">
        <i class="el-icon-warning"></i>
        支持300个板块，可同步到手机
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowEdit = false" size="small">取 消</el-button>
        <el-button type="primary" @click="addNews()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 移动 -->
    <el-dialog :visible.sync="isShowMove" width="400px" :before-close="handleClose">
      <template slot="title">
        <div class="title">加入板块</div>
      </template>
      <div class="hr"></div>
      <p class="name">将{{moveFolderData.stockcode}}{{moveFolderData.name}}加入板块：</p>
      <div class="small-tables">
        <el-table
          :data="classPlate.user_folder_list"
          @selection-change="handleSelectionChange"
          ref="multipleTable"
        >
          <el-table-column fixed="left" type="selection" width="70" align="center"></el-table-column>
          <el-table-column fixed="left" type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column property="name" label="板块名称"></el-table-column>
          <el-table-column property="cou" label="板块个股数" width="100"></el-table-column>
        </el-table>
      </div>
      <template slot="footer">
        <div class="footer">
          <div>已选{{this.multipleSelection.length}}个板块</div>
          <div>
            <el-button
              @click="()=>{
              isShowMove = false
              $refs.multipleTable.clearSelection()
              multipleSelection = []
              }"
              size="small"
            >取 消</el-button>
            <el-button type="primary" @click="moveNews()" size="small">确 定</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
    <!-- 添加持仓 -->
    <el-dialog :visible.sync="isShowAddtion" width="400" :before-close="handleClose">
      <template slot="title">
        <div class="title">添加持仓</div>
      </template>
      <div class="hr"></div>
      <el-form ref="form" :model="form" label-width="80px">
        <div class="copy">
          <textarea class="text" placeholder="在此处粘贴信息，智能识别持仓信息"></textarea>
          <div class="button">识别</div>
        </div>
        <el-form-item label="类型:">
          <div class="list">
            <div
              :class="selectType === index ? 'one-active' : 'one'"
              v-for="(item, index) in type"
              :key="index"
              @click="selectTypes(index)"
            >{{ item }}</div>
          </div>
        </el-form-item>
        <el-form-item label="标的:">
          <el-col :span="8">
            <el-input placeholder="请输入代码简称" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="结构:">
          <div class="list">
            <div
              :class="selectStructure === index ? 'one-active' : 'one'"
              v-for="(item, index) in aliasname_list"
              :key="index"
              @click="selectStructures(index)"
            >{{ item.aliasname }}</div>
          </div>
        </el-form-item>
        <el-form-item label="周期:">
          <div class="list">
            <div
              :class="selectCycle === index ? 'one-active' : 'one'"
              v-for="(item, index) in tabList"
              :key="index"
              @click="selectCycles(index)"
            >{{ item.cycletxt }}</div>
          </div>
        </el-form-item>
        <el-form-item label="名义本金:">
          <el-col :span="8">
            <el-input size="small"></el-input>
          </el-col>
          <el-col :span="4">
            <span>万元</span>
          </el-col>
        </el-form-item>
        <el-form-item label="开仓价格:">
          <el-col :span="8">
            <el-input size="small"></el-input>
          </el-col>
          <el-col :span="5">
            <span style="color: #1570e8">现价开仓</span>
          </el-col>
        </el-form-item>
        <el-form-item label="期权费率:">
          <el-col :span="8">
            <el-input size="small"></el-input>
          </el-col>
          <el-col :span="3">
            <span>%</span>
          </el-col>
        </el-form-item>
        <el-form-item label="起始日:">
          <el-col :span="5">
            <el-date-picker size="small" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="到期日:">
          <el-col :span="5">
            <el-date-picker size="small" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="后端费率:">
          <el-col :span="8">
            <el-input size="small" placeholder="请输入"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAddtion = false" size="small">取 消</el-button>
        <el-button type="primary" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  folder,
  stocklist,
  save_folder,
  del_folder,
  move_folder
} from "../../api/OptionalStock/index";
import { saveTableHead } from "@/api/MarketPlace/index";
export default {
  name: "Geometry1Vanilla",
  data() {
    return {
      value1: "",
      tabtitle: [],
      tableData: [],
      isShowAdd: false,
      isShowEdit: false,
      isShowMove: false,
      isShowAddtion: false,
      className: "",
      visible: false,
      classPlate: [],
      gridData: [],
      type: ["香草", "雪球"],
      selectPlate: {},
      selectType: -1,
      selectStructure: -1,
      selectCycle: -1,
      form: {},
      tabList: [],
      checkList: [],
      stock_list: [],
      aliasname_list: [],
      cycle_list: [],
      productList: [],
      //动态表头
      all_wave_head: [],
      checkListWaveHead: [],
      checkListWaveHeadTable: [],
      conceptualOptions: [],
      listedSectorOptions: [],
      actualControllerOptions: [],
      stockHead: [],
      checkstockTable: [],
      checkstock: [],
      aliasname: [],
      pageQuery: {
        page_size: 20,
        page_no: 1
      },
      total: 0,
      moveFolderData: {},
      totalPage: 0,
      prop: {},
      loading: false,
      warning: true,
      multipleSelection: []
    };
  },
  mounted() {
    this.getClassPlateList();
  },
  methods: {
    changeCellStyle() {
      return "font-size:13px;height:32px;padding:0px";
    },
    // 板块
    async getClassPlateList() {
      const { data } = await folder();
      this.classPlate = data;
      this.getTableList();
      this.lazyLoading();
    },
    isShowAddHandleClose() {
      this.isShowAdd = false;
    },
    activeAdd() {
      this.isShowAdd = true;
      this.className = "";
    },
    async addNews() {
      const { data } = await save_folder({
        name: this.className,
        folder_id: this.selectPlate.id
      });
      this.isShowEdit = false;
      this.isShowAdd = false;
      this.getClassPlateList();
      this.className = "";
    },
    activePlate(item) {
      this.stock_list = [];
      if (this.selectPlate.id == item.id) {
        this.selectPlate = "";
        this.pageQuery.page_no = 1;
        this.getTableList();
        return;
      }
      this.selectPlate = item;
      this.pageQuery.page_no = 1;
      this.getTableList();
    },
    async getTableList() {
      this.loading = true;
      const { data } = await stocklist({
        ...this.pageQuery,
        ...this.prop,
        folder_id: this.selectPlate.id,
        type: 1
      });
      this.stock_list.unshift(...data.stock_list);
      this.productList = data.product_list;
      this.aliasname_list = data.aliasname_list; //结构表头
      var aliasname = data.aliasname_list.filter(item => {
        return item.show == 1;
      });
      this.aliasname = aliasname.map(item => {
        return item.aliasname;
      });
      this.tabList = data.cycle_list; //周期表头
      var checkList = data.cycle_list.filter(item => {
        return item.show == 1;
      });
      this.checkList = checkList.map(item => {
        return item.cycletxt;
      });
      this.conceptualOptions = data.concept_list;
      this.listedSectorOptions = data.sector_list;
      this.actualControllerOptions = data.owner_list;
      this.stockHead = data.all_stock_head; //股票表头
      this.checkstockTable = data.all_stock_head.filter(item => {
        return item.show == 1; //选中的表头
      });
      this.checkstock = this.checkstockTable.map(item => {
        return item.name;
      });
      this.all_wave_head = data.all_wave_field;
      this.checkListWaveHeadTable = data.all_wave_field.filter(item => {
        return item.show == 1;
      });
      this.checkListWaveHead = this.checkListWaveHeadTable.map(item => {
        return item.name;
      });
      this.total = data.total;
      this.totalPage = data.page_cou;
      this.$nextTick(() => {
        this.loading = false;
        this.$refs?.table.doLayout();
      });
    },
    deleteDate() {
      console.log("确认删除");
    },
    activeEdit(item) {
      this.selectPlate = item;
      this.className = item.name;
      this.isShowEdit = true;
    },
    async editNews() {
      const { data } = await save_folder({
        name: this.className,
        folder_id: this.selectPlate?.id
      });
      this.getClassPlateList();
      this.isShowEdit = false;
      this.className = "";
    },
    activeMove(item) {
      console.log(item);
      this.isShowMove = true;
      this.moveFolderData = item;
    },
    async moveNews(id) {
      this.isShowMove = false;
      this.className = "";
      await move_folder({
        code: this.moveFolderData.stockcode,
        folder_id: this.multipleSelection.join()
      });
      this.$refs.multipleTable.clearSelection();
      this.multipleSelection = [];
      this.selectPlate = [];
      this.pageQuery.page_no = 1;
      this.getTableList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => {
        return item.id;
      });
    },
    hover(value) {
      this.visible = true;
    },
    hoverout() {
      this.visible = false;
    },
    async deletePlate(id) {
      const { data } = await del_folder({ folder_id: id });
      this.getClassPlateList();
    },
    activeAddition() {
      this.isShowAddtion = true;
    },
    selectTypes(index) {
      this.selectType = index;
    },
    selectStructures(index) {
      this.selectStructure = index;
    },
    selectCycles(index) {
      this.selectCycle = index;
    },
    handleClose() {},
    group() {},
    //保存表头
    async visibleChange(val) {
      if (val == false) {
        const data = await saveTableHead({
          stock_field: this.checkstock.join(),
          aliasname: this.aliasname.join(),
          cycle: this.checkList.join(),
          wave_field: this.checkListWaveHead.join(),
          type: "1"
        });
        if (data.code == 1) {
          this.$message({
            type: "success",
            message: data.msg
          });
          this.pageQuery.page_no = 1;
          this.stock_list = [];
          this.getTableList();
        }
      }
    },
    getColor(name) {
      var aa = name + "";
      if (aa.indexOf(".") !== -1) {
        return name > 0 ? "#E93030" : "#0E9D58";
      } else {
        return;
      }
    },
    getPercentageSign(name) {
      var aa = name + "";
      console.log();
      if (aa.indexOf(".") !== -1) {
        return name + "%";
      } else {
        return name;
      }
    },
    lazyLoading() {
      let dom = document.querySelector(".el-table__body-wrapper");
      dom.addEventListener("scroll", v => {
        const scrollDistance =
          dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scrollDistance <= 1) {
          if (this.pageQuery.page_no >= this.totalPage && this.warning) {
            this.warning = false;
            this.$message.warning("我~是有底线的 (～￣▽￣)～");
            setTimeout(() => {
              this.warning = true;
            }, 1000);
          }
          if (this.pageQuery.page_no < this.totalPage && !this.loading) {
            this.pageQuery.page_no++;
            this.getTableList();
          }
        }
      });
    },
    changeSort(prop) {
      var aa = this.productList.filter(item => {
        return item.name == prop.prop;
      });
      if (aa.length > 0) {
        this.prop = {
          qiquan: prop.prop,
          order: prop.order
        };
      } else {
        this.prop = {
          sort: prop.prop || "",
          order: prop.order || ""
        };
      }
      this.pageQuery.page_no = 1;
      this.stock_list = [];
      this.getTableList();
    },
    getwidth(name) {
      return `${15 * name.length + 40} `;
    }
  }
};
</script>

<style lang="less" scoped>
.vanilla {
  margin: 16px 0 30px 0;
  background-color: #fff;
  width: 100%;
  height: auto;
  border-radius: 10px;
  color: #1e2024;
  font-size: 12px;

  .list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .one {
    padding: 8px 18px;
    border-radius: 6px;
    background-color: #f3f3f3;
    color: #3d3d3d;
    margin: 5px 5px 5px 0px;
    line-height: 1;
  }
  .one-active {
    padding: 8px 18px;
    border-radius: 6px;
    background-color: #1570e8;
    color: #f3f3f3;
    margin: 5px 5px 5px 0px;
    line-height: 1;
  }
  .footer {
    display: flex;
    justify-content: space-between;
  }
  .title {
    font-size: 18px;
    color: #3d3d3d;
    text-align: left !important;
    line-height: 24px;
    height: 24px;
  }

  .copy {
    width: 100%;
    height: 100px;
    overflow-y: scroll;
    background-color: #f3f3f3;
    margin-bottom: 5px;
    position: relative;
    .text {
      resize: none;
      background-color: #f3f3f3;
      padding: 10px;
      width: 90%;
      height: 90px;
      border: none;
      outline: none;
    }
    .button {
      position: absolute;
      padding: 2px 12px;
      bottom: 5px;
      right: 10px;
      border-radius: 4px;
      background-color: #165dff;
      color: #f3f3f3;
    }
  }
  :deep .el-dialog__body {
    padding: 0px 20px 30px 20px;
  }
  .hr {
    height: 1px;
    background-color: #f3f3f3;
    width: 100%;
    margin-bottom: 15px;
  }
  .small-tables {
    border: 1px solid #f3f3f3;
  }
  .name {
    text-align: left;
  }

  .content {
    display: flex;
    justify-content: space-between;
    padding: 0px 10px 10px 0;
    .content-left {
      width: 185px;
      border-right: 1px solid #ccc;

      .addtionText {
        color: #1570e8;
      }
      .options {
        display: flex;
        justify-content: flex-start;
      }
      .content-title {
        width: 100%;
        height: 47px;
        box-sizing: border-box;
        font-size: 13px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 10px;
        padding: 0 10px;
        .el-button {
          background: rgba(22, 93, 255, 0.1);
          color: #165dff;
          border: unset;
        }
        .text-left {
          color: #1e2024;
          font-size: 16px;
        }
        .text-right {
          color: #165dff;
          font-size: 12px;
        }
        .text-right:hover {
          cursor: pointer;
        }
      }
      .content-class {
        width: 100%;
        height: 47px;
        box-sizing: border-box;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666;
        cursor: pointer;
        padding: 0px 24px;
        background: rgba(219, 219, 219, 0.1);
        &:hover {
          background-color: rgba(51, 119, 255, 0.1);
        }
        .icon {
          width: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
        p {
          margin: 0;
          font-size: 13px;
          line-height: 34px;
        }
      }
      .content-active {
        width: 100%;
        height: 47px;
        box-sizing: border-box;
        font-size: 16px;
        display: flex;
        padding: 0px 24px;
        justify-content: space-between;
        align-items: center;
        color: #3377ff;
        background-color: rgba(51, 119, 255, 0.1);
        cursor: pointer;
        .icon {
          width: 40px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }
    .content-right {
      width: calc(100% - 205px);
      height: 100%;
      background-color: #f7f7f7;
      // flex: 1;
      // overflow-x: scroll;
      border-radius: 0px 10px 10px 0px;
      .content-top {
        display: flex;
        justify-content: space-between;
        padding: 10px;
      }

      .flow {
        display: flex;
        justify-content: space-between;
        padding: 10px;
      }
    }
  }
  .options {
    display: flex;
    justify-content: space-around;
  }
  .el-tabs--border-card {
    border-radius: 10px;
    border: none;
    box-shadow: none;
  }
  .tabs {
    padding: 10px;
    .stock {
      display: flex;
      justify-content: flex-start;
      margin-top: -26px;
      .stock-l {
        margin-right: 32px;
        .call {
          font-size: 24px;
          font-weight: 500;
          color: #1e2024;
          padding-right: 5px;
        }
        .M {
          font-size: 20px;
          font-weight: 500;
          color: #e93030;
          padding-right: 5px;
        }
        .history {
          font-size: 12px;
          font-weight: 400;
          color: #1570e8;
        }
      }
      .stock-r {
        line-height: 39px;
        .names {
          font-size: 10px;
          color: #e93030;
          width: 26px;
          height: 20px;
          float: left;
          margin-right: 5px;
          line-height: 12px;
          margin-top: 5px;
        }
        .myriad {
          font-size: 18px;
          color: #e93030;
          margin-right: 5px;
        }
        .percent {
          font-size: 16px;
          color: #e93030;
        }
      }
    }
    .snowball {
      position: relative;
      .btns {
        position: absolute;
        right: 103px;
        bottom: 222px;
        width: 28px;
        height: 66px;
        line-height: 14px;
        font-size: 14px;
        text-align: center;
        background-color: #3377ff;
        border: none;
        border-radius: 2px;
        color: #fff;
      }
    }
    .snowball1 {
      position: relative;
      .btns {
        position: absolute;
        right: 103px;
        bottom: 222px;
        width: 28px;
        height: 66px;
        line-height: 14px;
        font-size: 14px;
        text-align: center;
        background-color: #3377ff;
        border: none;
        border-radius: 2px;
        color: #fff;
      }
    }
    .snowball2 {
      position: relative;
      .btns {
        position: absolute;
        right: 103px;
        bottom: 222px;
        width: 28px;
        height: 66px;
        line-height: 14px;
        font-size: 14px;
        text-align: center;
        background-color: #3377ff;
        border: none;
        border-radius: 2px;
        color: #fff;
      }
    }
  }
}
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background: unset !important;
}
/deep/.el-table th.el-table__cell > .cell {
  padding: unset !important;
}
/deep/ .el-table--border th.el-table__cell:hover {
  background: #ddd;
}
/deep/ .el-table th.el-table__cell {
  background: #f4f4f4;
  font-weight: unset;
  color: #1e2024;
  height: 50px;
  cursor: pointer;
}
.userFolderDialog {
  /deep/.el-dialog__header {
    background: #3e4346;
    text-align: left;
    height: 32px;
    box-sizing: border-box;
    padding: 0px 20px 0px 20px;
    display: flex;
    align-items: center;
    .el-dialog__headerbtn {
      top: 5px;
    }
    .el-dialog__title {
      color: #fff;
    }
  }
  /deep/ .el-dialog__body {
    padding-bottom: 0;
    .title {
      color: #000000;
      font-size: 15px;
      text-align: left;
      height: 30px;
    }
    .warning {
      height: 40px;
      line-height: 40px;
      text-align: left;
      color: #000000;
      .el-icon-warning {
        color: #0081db;
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="less">
.mypopover {
  padding: 0;
  box-sizing: border-box !important;
  text-align: center;
}
.titles-center,
.titles-right {
  padding-left: 20px;
}
.contentpopper {
  width: 104px;
  text-align: center;
  min-width: unset;
  height: 68px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
</style>